<template>
  <div class="planDetails">
    <van-nav-bar title="购买" left-arrow @click-left="onClickLeft"/>
    <!-- 剩余可认购额度 0.33BTC -->
    <div style="background:#ffffff">
      <div class="buy">剩余可认购额度 0.33BTC</div>
      <div class="xian"></div>
      <!-- 可用余额 -->
      <div class="available">
        <div>可用余额</div>
        <div>0.000219 BTC</div>
        <div style="color:#D1A568">充值</div>
      </div>
      <div style="margin-top:17px" class="xian"></div>
      <!-- 认购数量 -->
      <div class="number">
        <div>认购数量</div>
        <div class="qigou">0.002 BTC起购</div>
        <div></div>
      </div>
      <div style="margin-top:17px" class="xian"></div>
      <!-- 预期收益 -->
      <div style="padding-bottom:10px;">
        <div class="expected">
          <div>
            预期收益
            <span style="margin-left:50px;color:#D1A568;">0BTC</span>
          </div>
        </div>
        <div class="expected">
          <div>
            预期年化收益
            <span style="margin-left:23px;color:#D1A568;">12%</span>
          </div>
        </div>
        <div class="expected">
          <div>
            预期收款日
            <span style="margin-left:36px;color:#666666;">2019-06-06</span>
          </div>
        </div>
      </div>
    </div>

    <!-- *收益自动转入活期产品余额 -->
    <div class="current">
      <div>*收益自动转入活期产品余额</div>
    </div>
    <!-- 确定 -->
    <div class="ok">
      <van-radio-group v-model="radio">
        <van-radio name>勾选即表示您已阅读并同意我们的《投资服务协议》</van-radio>
      </van-radio-group>
    </div>
    <div class="foor">
      <button @click="showPopup" style="border: none;">确定</button>
    </div>
    <!-- 弹框 -->
    <!-- 弹窗隐藏区域 -->
    <div v-show="isPopupVisible" id="myModal" class="modal">
      <!-- 弹窗内容 -->
      <div class="modal-content">
        <div class="password" algin="center">
          请输入交易密码
          <span>
            <van-icon @click="closePopup" name="cross"/>
          </span>
        </div>
        <!-- 输入密码框 -->
        <div>
          <input
            type="password"
            maxlength="6"
            placeholder="请输入6位数字交易密码"
            onkeyup="value=value.replace(/[^\d\.]/g,'')"
          >
        </div>
        <ul>
          <li>忘记密码</li>
        </ul>
        <!-- 确定 -->
        <div class="foor1">
          <button @click="purchase">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { NavBar, RadioGroup, Radio, Icon } from "vant";
export default {
  name:"buy",
  components: {
    [NavBar.name]: NavBar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Icon.name]: Icon
  },
  data() {
    return {
      radio: "",
      isPopupVisible: false //弹框
    };
  },
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 弹框
    showPopup() {
      this.isPopupVisible = true;
    },
    // 关闭弹框
    closePopup() {
      this.isPopupVisible = false;
    },
    // 点击关闭弹框
    purchase(){
      this.isPopupVisible = false;
    },
    // 购买成功
    purchase() {
      this.$router.push("/purchase");
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.planDetails {
  //   width: 100%;
  //   height: 100%;
  //   background: rgba(246, 246, 248, 1);
  .buy {
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(209, 165, 104, 1);
    text-align: left;
    margin-left: 25px;
    padding-top: 10px;
  }
  .xian {
    width: 100%;
    height: 1px;
    background: rgba(239, 239, 239, 1);
    margin-top: 10px;
  }
  .available {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .available > div {
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-top: 17px;
  }
  //  认购数量
  .number {
    width: 100%;
    display: flex;
  }
  .number > div {
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-top: 17px;
    flex: 1;
  }
  .number .qigou {
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-left: 20px;
    margin-top: 18px;
  }

  //  预期收益
  .expected {
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-top: 10px;
    margin-left: 25px;
  }
  // 活期
  .current {
    width: 100%;
    height: 50px;
    background: #ffffff;
    margin-top: 10px;
    // border: 1px solid red;
  }
  .current div {
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    padding-top: 15px;
    margin-left: 25px;
  }
  // 确定
  .foor {
    width: 95%;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    border: none;
  }

  .foor button {
    background: #d1a568;
    border-radius: 20px;
    width: 95%;
    height: 45px;
    margin-top: 10px;
    // position: absolute;
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border: none;
    border: 1px solid #d1a568;
  }
  //   弹框
  .modal {
    display: block;
    /* 默认隐藏 */
    /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    /*设置弹窗位置*/
    padding-top: 250px;
    padding-bottom: 100px;
    /*浮在全屏上*/
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  /* 弹窗内容 */

  .modal-content {
    /*弹窗背景色设置*/
    background-color: #fefefe;
    margin: auto;
    width: 80%;
    height: 150px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
  }
  //   输入交易密码
  .modal-content .password {
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    padding-top: 12px;
  }
  .modal-content span {
    position: absolute;
    right: 10%;
    width: 20px;
    height: 20px;
  }
  .modal-content ul li {
    font-size: 13px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    position: absolute;
    left: 60px;
    margin-top: 40px;
  }
  //    输入框
  input {
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    left: 60px;
    margin-top: 20px;
    border: none;
    position: absolute;
  }
  .foor1 button {
    width: 70%;
    height: 40px;
    background: #d1a658;
    position: absolute;
    border-radius: 20px;
    left: 0;
    right: 0;
    margin: 65px auto;
    font-size: 18px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border: 1px solid #d1a658;
  }
}
</style>
